<template>
    <div class="studentList">
      <!-- 学生列表 -->
      <!-- 查询，重置 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" >
        <el-form-item label="姓名">
          <el-input v-model="formInline.name" placeholder="请输入姓名查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add(ruleFormRef)">增加</el-button>
        </el-form-item>
      </el-form>
      <!--分页功能         
        slice(参数1,参数2)
        参数1：从何处开始选取（截取数组单元起始位置的索引下标）
        参数2：从何处结束选取（截取数组单元结束位置的索引下标）
        注意：不包括结束索引下标的数据
  
        后端返回数组例如[1,2,3,4,5.....100]
        前端获取通过   第1页 0-5    slice（0,5）从索引0开始，索引5结束（不包含5） （索引0,1,2,3,4）即(数据1,2,3,4,5)
                      第2页 5-10   slice（(2-1)*5 , 2*5）从索引5开始,索引10结束(不包含10)  (索引5,6,7,8,9）即(数据6,7,8,9,10)
                      第3页 10-15  slice（(3-1)*5 , 3*5）从索引10开始,索引15结束(不包含15)  (索引10,11,12,13,14）即(数据11,12,13,14,15)
        规律slice（  (当前页数-1)*每页条数   ，  当前页数*每页条数  ）
      -->
      <!-- <el-table  border :data="list.compData.slice((currentPage4-1)*pageSize4,currentPage4*pageSize4)"  stripe style="width: 100%"> -->
        <!-- 用计算属性的方法 -->
        <el-table  border :data="com"  height="250" stripe fit style="width: 100%" size="small" >
          <el-table-column prop="id" label="id" align="center" v-if="false"></el-table-column>
          <el-table-column fixed prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="years" label="毕业年份" align="center"></el-table-column>
          <el-table-column prop="job" label="职业" align="center"></el-table-column>
          <el-table-column prop="salary" label="薪水"  align="center"></el-table-column>
          <el-table-column prop="state_text" label="求职状态" align="center"></el-table-column>
          <el-table-column prop="province" label="工作省份/直辖市/自治区" align="center"></el-table-column>
          <el-table-column prop="city" label="工作城市" align="center"></el-table-column>
          <el-table-column label="操作"  align="center"  width="200" >
            <template #default="scope">
              <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#626AEF"
                  title="你确定要删除吗?"
                  @confirm="confirmEvent(scope.row.id)"
                  @cancel="cancelEvent"
                >
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
              <el-button type="success"  @click="Edit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 增加修改共用对话框 -->
        <el-dialog v-model="centerDialogVisible" :title="state?'新增毕业生信息':'修改毕业生信息'" width="30%" center>
          <el-form 
            ref="ruleFormRef"
            :model="ruleForm"
            label-width="120px"
            :rules="rules"
            class="demo-ruleForm"
            :size="formSize"
            status-icon>
            <el-form-item prop="id" :label-width="formLabelWidth" v-if="false" label="id">
              <el-input v-model="ruleForm.id" />
            </el-form-item>
            <el-form-item prop="name" :label-width="formLabelWidth" label="姓名">
              <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item prop="years" :label-width="formLabelWidth"  label="毕业年份">
              <el-date-picker
                v-model="ruleForm.years"
                type="year"
                placeholder="请选择"
              />
            </el-form-item>
            <el-form-item  prop="job" :label-width="formLabelWidth" label="职业">
              <el-select v-model="ruleForm.job" placeholder="请选择">
                  <el-option label="前端开发" value="前端开发" />
                  <el-option label="后端开发" value="后端开发" />
                  <el-option label="技术总监" value="技术总监" />
                  <el-option label="产品经理" value="产品经理" />
                  <el-option label="运维" value="运维" />
              </el-select>
            </el-form-item>
            <el-form-item  prop="salary" :label-width="formLabelWidth" label="薪水">
              <el-input v-model="ruleForm.salary" />
            </el-form-item>
            <el-form-item  prop="state" :label-width="formLabelWidth" label="求职状态">
              <el-select v-model="ruleForm.state" placeholder="请选择">
                  <el-option label="求职中" value="0" />
                  <el-option label="已工作" value="1" />
                  <el-option label="未工作" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item  prop="province" :label-width="formLabelWidth" label="工作省份/直辖市/自治区">
              <el-select v-model="ruleForm.province" placeholder="请选择">
                  <el-option label="山西" value="山西" />
                  <el-option label="天津" value="天津" />
                  <el-option label="浙江" value="浙江" />
                  <el-option label="湖北" value="湖北" />
                  <el-option label="陕西" value="陕西" />
                  <el-option label="四川" value="四川" />
                  <el-option label="湖北" value="湖北" />
                  <el-option label="湖南" value="湖南" />
                  <el-option label="河北" value="河北" />
                  <el-option label="河南" value="河南" />
                  <el-option label="江西" value="江西" />
                  <el-option label="甘肃" value="甘肃" />
                  <el-option label="内蒙古" value="内蒙古" />
                  <el-option label="辽宁" value="辽宁" />
                  <el-option label="黑龙江" value="黑龙江" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item  prop="province" :label-width="formLabelWidth" label="工作省份/直辖市/自治区">
              <el-input v-model="ruleForm.province" />
            </el-form-item> -->
            <!-- <el-form-item  prop="city" :label-width="formLabelWidth" label="工作城市">
              <el-select v-model="ruleForm.city" placeholder="请选择">
                  <el-option label="临汾市" value="临汾市" />
                  <el-option label="西青区" value="西青区" />
                  <el-option label="杭州市" value="杭州市" />
                  <el-option label="武汉市" value="武汉市" />
                  <el-option label="西安市" value="西安市" />
              </el-select>
            </el-form-item> -->
            <el-form-item  prop="city" :label-width="formLabelWidth"  label="工作城市">
              <el-input v-model="ruleForm.city" />
            </el-form-item>
            <el-form-item>
                <el-button @click="centerDialogVisible = false" type="primary">取消</el-button>
                <el-button type="primary" @click="sure(ruleFormRef)" >确认</el-button>
           </el-form-item>
          </el-form>
        </el-dialog>
      <el-pagination
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5,10,15,20,50]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- <Pagination :currentPage="currentPage4" :pageSize="pageSize4" :total="total"
    :handleSizeChange="handleSizeChange"
    :handleCurrentChange="handleCurrentChange"
    ></Pagination> -->
    </div>
  </template>
  
  <script setup>
// import Pagination from '../Scourse/pagination.vue'
import { ElMessage} from 'element-plus';
import {computed, onMounted,reactive,ref} from 'vue'
import {Graduate,Graduatefind,Graduatedel,Graduateadd,Graduateupdate} from '@/api/api'
const formInline = reactive({
      name: '张芳'
})
const state=ref(true)//弹出对话框标题状态
const formSize = ref('default')
const ruleFormRef = ref('')
const formLabelWidth=ref('80px')
const ruleForm = reactive({
  id:'',
  name: '',
  years: '',
  job: '',
  salary: '',
  state:'',
  province:'',
  city:''
})



//对话框打开与关闭
const centerDialogVisible = ref(false)

const currentPage4 = ref(1)//当前页数
const pageSize4 = ref(5)//每页显示条目个数，支持 v-model 双向绑定
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total = ref(100)
  let list=reactive({
    compData:[],
  })

  const rules=reactive({
  name: [
    { required: true, message: '请输入名字', trigger: 'blur' },
    { min: 1, max: 5, message: '长度应该在1-5', trigger: 'blur' },
  ],
  years:[
  {   type:'date',
      required: true,
      message: '请选择年份',
      trigger: 'change',
    }
  ],
  job:[
  { required: true, message: '请选择职业', trigger: 'blur' }
  ],
  salary:[
  { required: true, message: '请选择职业', trigger: 'change' }
  ],
  state_text:[
  { required: true, message: '请选择就业状态', trigger: 'blur' },
  ],
  province:[
  { required: true, message: '请输入', trigger: 'blur' },
  ],
  city:[
  { required: true, message: '请输入', trigger: 'blur' },
  ]
})
//点击对话框确定按钮
const sure = async (formEl) => {
  console.log(formEl)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if(state.value){
        console.log('年份',ruleForm.years)
        //增加路由
        Graduateadd(
          // {
          // name: ruleForm.name,
          // years: ruleForm.years,
          // job:ruleForm.job,
          // salary:ruleForm.salary,
          // state:ruleForm.state,
          // province:ruleForm.province,
          // city:ruleForm.city
          // }
          ruleForm
          ).then(res=>{
          console.log('增加返回的信息',res.data)
          if(res.data.code===0){
            formEl.resetFields()//重置表单
            centerDialogVisible.value=false
            if(res?.data.message){
                ElMessage({
                  message:res.data.message,
                  type:'success'
                })
                getinfo()//重新渲染数据
              }
          }
        })
      }else{
        //修改路由
        Graduateupdate( {
          name: ruleForm.name,
          years: ruleForm.years,
          job:ruleForm.job,
          salary:ruleForm.salary,
          state:ruleForm.state,
          province:ruleForm.province,
          city:ruleForm.city,
          id:ruleForm.id
          }).then(res=>{
          console.log('修改--',res.data)
          if(res.data.code===0){
            formEl.resetFields()//重置表单
            centerDialogVisible.value=false
            if(res?.data.message){
                ElMessage({
                  message:res.data.message,
                  type:'success'
                })
                getinfo()//重新渲染数据
              }
          }
        })
      }
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
//获取表格数据
const getinfo=()=>{
  Graduate().then(res=>{
        console.log(res.data.data,"毕业生信息")
        console.log(res.data.total,"毕业生信息总数")
        list.compData=res.data.data
        list.compData.forEach(item=>{
          item.state==="1"?item.state_text='已工作':item.state==="2"?item.state_text='求职中':item.state_text='未工作'
         item.years=item.years.split('-',1)
        })
       
        total.value=res.data.total
      })
}
  onMounted(()=>{
    getinfo()
  })
  //前端分页功能
 const com=computed(()=>{
     // 规律slice（  (当前页数-1)*每页条数   ，  当前页数*每页条数  ）
     return  list.compData.slice((currentPage4.value-1)*pageSize4.value,currentPage4.value*pageSize4.value)
  })
 //改变每页显示多少条
const handleSizeChange = (val) => {
  pageSize4.value=val
  currentPage4.value=1
  console.log(`每页显示${val}条 `)
}
//改变当前页
const handleCurrentChange = (val) => {
  currentPage4.value=val
  console.log(`当前页: ${val}`)
}
//搜索
const search=async()=>{
 const res=await Graduatefind({name:formInline.name})
 console.log('查询到的数据',res.data.data)
 list.compData=res.data.data
 list.compData.forEach(item=>{
          item.state==="1"?item.state_text='已工作':item.state==="2"?item.state_text='求职中':item.state_text='未工作'
        })
}
//重置
const reset=()=>{
  getinfo()
}


//发送删除请求
const del=async(query)=>{
  console.log('id',query)
  const res=await Graduatedel({
    id:query
  })
  console.log('删除后返回的数据',res.data)

  if(res?.data.message){
    ElMessage({
      message:res.data.message,
      type:'success'
    })
    getinfo()
  }
}
//调用删除方法
const confirmEvent = (query) => {
  console.log('确定!')
  del(query)
}

const cancelEvent = () => {
  console.log('cancel!')
}
//点击编辑按钮
const Edit=(row)=>{
  console.log('修改的这条数据',row.id)
  console.log('修改的这条数据',row.name)
  console.log('修改的这条数据',row.years[0])
  centerDialogVisible.value=true//打开对话框
  state.value=false//改变状态  编辑  false
  ruleForm.id=row.id//把选中的这条数据渲染到表单
  ruleForm.name=row.name
  ruleForm.years=row.years[0]
  ruleForm.job=row.job
  ruleForm.salary=row.salary
  ruleForm.state=row.state
  ruleForm.province=row.province
  ruleForm.city=row.city
}
//点击增加按钮
const add=(ruleFormRef)=>{
  centerDialogVisible.value=true//打开对话框
  ruleFormRef.resetFields()//重置表单
  state.value=true//  增加   true
}
  </script>
  
  <style lang="less" scoped>
  .studentList{
    .demo-form-inline,.el-form-item {
      text-align: left;
    }
    .el-pagination{
      text-align: left;
      margin-top:20px;
    }
    


  }
  </style>